<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div style="padding: 20px;" id="app">
    <form class="layui-form">
        <div class="layui-form-item">
            订单号:<span style="margin-left: 20px;">{{ordermsg.ddno}}</span>
        </div>

        <div class="layui-form-item">
            商品信息:
            <span style="margin-left: 20px;">
            <template v-for="orderdetails in ordermsg.orderdetailslist">
                {{orderdetails.product.name}}&nbsp;&nbsp;*     {{orderdetails.num}}
            </template>
        </span>
        </div>

        <div class="layui-form-item">
            总金额:<span style="margin-left: 20px;color:darkred">{{ordermsg.total}}RMB</span>
        </div>


        <div class="layui-form-item">
                <input type="text" v-model="zhanghao" required  lay-verify="required" placeholder="支付帐号" autocomplete="off" class="layui-input">
        </div>

        <div class="layui-form-item">
            <input type="password" v-model="mima" required  lay-verify="required" placeholder="支付密码" autocomplete="off" class="layui-input">
        </div>

        <div class="layui-form-item">
                <a class="layui-btn" lay-submit lay-filter="formDemo" @click="fukuan()">付款</a>
        </div>

    </form>
</div>
</body>
<script type="text/javascript" src="axios/vue.js"></script>
<script type="text/javascript" src="axios/axios.min.js"></script>
<script type="text/javascript" src="axios/qs.js"></script>
<script type="text/javascript" src="axios/getUrlParams.js"></script>
<script type="text/javascript" src="layer/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    var qs = Qs
    var id = UrlParam.paramValues("id").toString()
    var vmm = new Vue({
        el: '#app',
        data: {
            filename:"",
            id:id,
            ordermsg:"",
            zhanghao:"",
            mima:"",
        },
        mounted(){
            this.show()
        },
        methods: {
            fukuan() {
                if(this.zhanghao==""){
                    layer.msg("支付帐号不能为空",{icon:5})
                    return false;
                }
                if(this.mima==""){
                    layer.msg("支付密码不能为空",{icon:5})
                    return false;
                }
                axios.post('fukuan',qs.stringify({
                    id:this.id,
                })).then(response =>{
                    if(response.data.data == 200){
                        layer.alert("支付成功，等待卖家发货",{icon:6},function(){
                            window.parent.layer.closeAll();
                            window.parent.location.reload();
                        })
                    }else{
                        layer.alert("支付失败，订单中存在已出售的商品",{icon:5},function(){
                            window.parent.layer.closeAll();
                            window.parent.location.reload();
                        })
                    }

                }).catch(error =>{
                    console.log(error)
                })
            },

            show() {
                axios.post('member/ordermsgShow',qs.stringify({
                    id:this.id,
                })).then(response =>{
                    this.ordermsg = response.data.ordermsg
                }).catch(error =>{
                    console.log(error)
                })
            },





        }
    });
</script>
</html>